import {React,Component} from 'react'
import bus from '../bus/index'
class List extends Component {
    state={
        list:[]
    }
    componentDidMount(){
        let newList=JSON.parse(JSON.stringify(this.state.list));
       
        bus.on("msg",(data)=>{
            newList.push(data)
            this.setState({
                list:newList
            })
        })
        bus.on('xgok',(data)=>{
            let index=this.state.list.findIndex(item=>item.id==data.id);
            this.state.list[index]={...data}
            this.setState({
                list:this.state.list
            })
            this.props.showHide();
        })
    }
    remove=(id)=>{
        let index=this.state.list.findIndex(item=>item.id==id);
        this.state.list.splice(index,1);
        this.setState({
            list:this.state.list
        })
    }
    edit=(item)=>{
        bus.emit('xg',{...item,type:2})
        this.props.showHide();
    }
    render(){
        return <div>
                <ul>
                    {
                        this.state.list.map((item)=>{
                            return <li key={item.id}>
                                {item.name} {item.tel} <button>拨号</button>
                                <button onClick={this.edit.bind(this,item)}>编辑</button>
                                <button onClick={this.remove.bind(this,item.id)}>删除</button>
                            </li>
                        })
                    }
                </ul>
        </div>
    }
}

export default List